<template>
    <div>
        <div class="balance-title">
            <div class="balance-title-name">我的余额</div>
            <div class="balance-title-value">
                ￥
                <div style="font-size: 44px;">999</div>
            </div>
        </div>
        <div class="balance-content">
            <div class="balance-content-title-big">
                <div class="balance-content-title">
                    <div class="content-title-name">余额明细</div>
                    <div class="content-title-nav">
                        <div class="content-title-nav-name">类型</div>
                        <div class="content-title-nav-name">时间</div>
                        <div class="content-title-nav-name">金额</div>
                    </div>
                </div>
            </div>
            <div class="balance-content-value">
                <div
                    class="content-value-flex"
                    v-for="(item, index) in 10"
                    :key="index"
                >
                    <div class="content-value-flex-type">签到</div>
                    <div class="content-value-flex-time">2020-08-15 11:15</div>
                    <div
                        :class="[
                            index == 1
                                ? 'content-value-flex-money1'
                                : 'content-value-flex-money'
                        ]"
                    >
                        +10
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {};
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {}
};
</script>

<style lang="scss" scoped>
.balance-title {
    min-width: 800px;
    background: #fff;
    height: 140px;
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0px 24px;
    box-sizing: border-box;
    border-radius: 8px;
    .balance-title-name {
        font-size: 20px;
    }
    .balance-title-value {
        display: flex;
        align-items: center;
        color: #f25427;
        font-size: 16px;
    }
}
.balance-content {
    height: 100%;
    min-height: 600px;
    margin-top: 24px;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    margin-left: 24px;
    min-width: 800px;
    .balance-content-title {
        height: 104px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 0 24px;
        box-sizing: border-box;
    }
}
.balance-content-title-big {
    width: 100%;
    height: 104px;
    box-shadow: 0px 5px 5px -5px #dadfe6;
}
.content-title-name {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
}
.content-title-nav {
    display: flex;
}
.content-title-nav-name {
    flex: 1;
    color: #9ea4b0;
}
.balance-content-value {
    padding: 24px 24px 30px 24px;
}
.content-value-flex {
    display: flex;
    height: 48px;
}
.content-value-flex-type {
    flex: 1;
    color: #2d3440;
    font-size: 16px;
}
.content-value-flex-time {
    flex: 1;
    color: #2d3440;
    font-size: 16px;
}
.content-value-flex-money {
    flex: 1;
    color: #2d3440;
    font-size: 16px;
}
.content-value-flex-money1 {
    flex: 1;
    color: #f25427;
    font-size: 16px;
}
</style>
